
<html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>宜春学院数计学院web前端教学练习</title>

  <link
          href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css"
          rel="stylesheet"
  />
  <link
          href="https://cdn.bootcdn.net/ajax/libs/bootstrap-icons/1.10.4/font/bootstrap-icons.min.css"
          rel="stylesheet"
  />
  <link rel="stylesheet" href="./css/index.css" />
  <link rel="stylesheet" href="./css/icon-animation.css" />
  <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
</head>
<style>
  body {
    background-image: url("images/img1.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height: 100vh;
    box-shadow: inset 0 0 0 2000px rgb(255 255 255 / 30%);
  }
</style>
<body>
<section id="hero">
  <div class="hero-table">
    <div class="hero-table-center">
      <div class="container">
        <div class="row justify-content-center">
          <div class="col-lg-12" style="text-align: center">
            <h1>我的家乡——甘肃庆阳</h1>
          </div>
          <div class="hero-icon">
            <a href="#about" style="color: black">
              <i class="bi bi-arrow-down-circle hero-icon-animation"></i>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<section id="nav" class="py-5">
  <div class="container">
    <nav class="navbar navbar-expand-lg navbar-light bg-white">
      <a class="navbar-brand" href="#">简历导航</a>
      <button
              class="navbar-toggler"
              type="button"
              data-toggle="collapse"
              data-target="#navbarSupportedContent"
              aria-controls="navbarSupportedContent"
              aria-expanded="false"
              aria-label="Toggle navigation"
      >
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#about">
              家乡介绍
              <span class="sr-only">(current)</span>
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#service">美食特产</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#exhibition">文化习俗</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#team">风景名胜</a>
          </li>
        </ul>
      </div>
    </nav>
  </div>
</section>
<section id="about" class="pt-5 py-5">
  <div class="container">
    <div class="row align-items-center pb-5">
      <div class="col-lg-8">
        <div class="mt-3">
          <h2 class="sub-title">——————介绍一下我的家乡</h2>
          <h4 class="mt-4">
            Hello
            <span class="font-weight-bold">甘肃庆阳</span>
          </h4>
          <p class="text-muted mt-4 introduce-text text-justify">
            庆阳位于甘肃省最东部，地处陕甘宁三省区的交汇处‌。
            其具体地理位置为东接陕西省延安市，南与甘肃省泾川县及陕西长武县、彬县、旬邑县相连，北邻陕西省榆林市及宁夏回族自治区盐池县，西与宁夏固原市接壤。
            庆阳的地理坐标介于北纬35°15′～37°10′，东经106°20′～108°45′之间，总面积27119平方千米
          </p>
          <div class="row">
            <div class="col-md-6">
              <ul class="about-info">
                <li class="mt-3">
                  地理位置:
                  <span class="text-muted ml-3">甘肃省东部</span>
                </li>
                <li class="mt-3">
                  邮件编码:
                  <span class="text-muted ml-3">745000</span>
                </li>
                <li class="mt-3">
                  地貌特征:
                  <span class="text-muted ml-3">沟壑、丘陵</span>
                </li>
                <li class="mt-3">
                  气候环境:
                  <span class="text-muted ml-3">四季分明</span>
                </li>
              </ul>
            </div>
          </div>
          <div class="mt-4 pt-2">
            <h5>
              任意门
              <span class="badge badge-pill badge-primary">
                    点击跳转外站 <i class="bi bi-box-arrow-in-up-right"></i>
                  </span>
            </h5>
            <a
                    href="https://www.baidu.com/link?url=Dt7QEGmDkaEnAnE8Jta5zfCbBJdUGfXPDiDpeymDoNdkuqSqNSuKXcXaB0o9LN9kKFcVOlYYJr2MBcwjNWLONR2_5V_PsjNNvsefuto1lMq&wd=&eqid=a49b9044009f94ee0000000567b96995"
                    class="btn btn-outline-danger btn-lg"
                    target="_blank"
            >
              庆阳介绍视频
            </a>
          </div>
        </div>
      </div>
      <div class="col-lg-4">
        <div class="mt-3 about-img">
          <img
                  src="images/img15.jpg"
                  alt="author"
                  class="img-fluid rounded-lg"
          />
        </div>
      </div>
    </div>
  </div>
</section>
<section id="service" class="pt-5 pb-5 mt-5">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-12">
        <div class="text-left">
          <h2 class="sub-title">——————人人爱美食</h2>
          <h4 class="mt-4">家乡的美食</h4>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="card-deck mt-3">
        <div class="card shadow">
          <div class="card-body">
            <p class="card-text ct">
              <img
                      src="images/img5.jpg"
                      alt="author"
                      class="img-fluid rounded-lg"
              />
              活络面：面条是纯手工面，筋道有嚼劲儿，汤是麻麻辣辣的味道，让人流连忘返
            </p>
          </div>
        </div>
        <div class="card shadow">
          <div class="card-body">
            <p class="card-text ct">
              <img
                      src="images/img17.jpg"
                      alt="author"
                      class="img-fluid rounded-lg"
              />
              土暖锅：是一个特殊形状的锅，名字叫做暖锅，锅的中间是一个洞，放入无烟炭，最后将自己想吃的食材放入锅的边缘
            </p>
          </div>
        </div>
        <div class="card shadow">
          <div class="card-body">
            <p class="card-text ct">
              <img
                      src="images/img18.jpg"
                      alt="author"
                      class="img-fluid rounded-lg"
              />
              搅团：是一种传统特色小吃，主要用面粉制作，根据用料不同可以分为荞面搅团、玉米搅团、高粱搅团和红芋搅团等。
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<section id="exhibition" class="pb-5 mt-5 pt-5">
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <div class="text-left">
          <h2 class="sub-title">——————家乡的文化习俗</h2>
          <h4 class="mt-4">社火</h4>
        </div>
      </div>
    </div>

    <div class="row mt-4">
      <div class="col-lg-12 pb-5">
        <div class="bd-example">
          <div
                  id="carouselExampleCaptions"
                  class="carousel slide"
                  data-ride="carousel"
          >
            <ol class="carousel-indicators">
              <li
                      data-target="#carouselExampleCaptions"
                      data-slide-to="0"
                      class="active"
              ></li>
              <li
                      data-target="#carouselExampleCaptions"
                      data-slide-to="1"
              ></li>
              <li
                      data-target="#carouselExampleCaptions"
                      data-slide-to="2"
              ></li>
            </ol>
            <div class="carousel-inner">
              <div class="carousel-item active">
                <img
                        src="images/img20.jpg"
                        class="d-block w-100"
                        alt="carousel1"
                />
              </div>
              <div class="carousel-item">
                <img
                        src="images/img21.jpg"
                        class="d-block w-100"
                        alt="carousel2"
                />
              </div>
              <div class="carousel-item">
                <img
                        src="images/img23.jpg"
                        class="d-block w-100"
                        alt="carousel3"
                />
              </div>
            </div>
            <a
                    class="carousel-control-prev"
                    href="#carouselExampleCaptions"
                    role="button"
                    data-slide="prev"
            >
                  <span
                          class="carousel-control-prev-icon"
                          aria-hidden="true"
                  ></span>
              <span class="sr-only">Previous</span>
            </a>
            <a
                    class="carousel-control-next"
                    href="#carouselExampleCaptions"
                    role="button"
                    data-slide="next"
            >
                  <span
                          class="carousel-control-next-icon"
                          aria-hidden="true"
                  ></span>
              <span class="sr-only">Next</span>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<section id="team" class="pb-5 mt-5">
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <div class="text-left">
          <h2 class="sub-title">—————家乡的风景</h2>
          <h4 class="mt-4">请欣赏视频</h4>
          <video width="900" height="400" controls>
            <source src="images/studio1.mp4" type="video/mp4">
            Your browser does not support the video tag.
          </video>
        </div>
      </div>
    </div>
    <div class="row justify-content-center">
      <div class="col-lg-12 text-center">
        <p class="text-muted">欢迎到我的家乡玩儿~</p>
      </div>
    </div>
  </div>
</section>
<section id="footer" class="py-5">
  <div class="container">
    <div class="row justify-content-center text-center">
      <div class="col-md-12">
        <div class="text-center">
          <a href="#" class="logo">
            <span>家乡介绍</span>
          </a>
          <br /><br />
          <p style="color: white">
            2025 ©简历 Designed by
            <a
                    href="https://www.educoder.net/users/pqzjvls8k/classrooms"
                    target="_blank"
                    style="color: white"
            >
              WEB前端课程
            </a>
          </p>
          <p style="color: white">宜春学院·数学与计算机科学学院·WEB前端课程</p>
          <p style="color: white">完成日期：2025年2月22日</p>
        </div>
      </div>
    </div>
  </div>
</section>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
<script src="./js/index.js"></script>
</body>
</html>
